import React, { Component } from 'react'
import Haha from './Haha'
import './test.css'
// 高阶组件对应的一般是 类组件
// 高阶组件可以 以 with 开头，采用小驼峰式命名方式
// 函数式组件可以使用高阶组件吗？？？？？？？？？？？？
const withWrapper = (OldCom) => {
  return class extends Component {
    componentDidMount () {
      // 使用console.log 代替一大段业务逻辑
      console.log('你好 HOC')
    }
    render () {
      return (
        <>
          <OldCom />
          <footer className = "color">Copyright © 2021 Facebook Inc.</footer>
        </>
      )
    }
  }
}
class Cart extends Component {
  render () {
    return (
      <span>购物车</span>
    )
  }
}
const CartCom = withWrapper(Cart)
class App extends Component {
  
  render() {
    return (
      <div>
        <div>这是其他的内容</div>
        <CartCom />
        <Haha />
      </div>
    )
  }
}

export default withWrapper(App)